<template>
  <view class="healthKnowledge-con" @click.top="allClick">
     <view class="healthKnowledge-title healthKnowledge-w">
         减肥期间不能吃哪些水果？
     </view>
     <view class="healthKnowledge-img healthKnowledge-w">
        <image :src="imgSrc" mode=""></image>
     </view>
     <view class="healthKnowledge-text healthKnowledge-w">
       减肥期间不建议进食脂肪含量高、热量含量高、糖分含量高的水果。
     </view>
     <view class="healthKnowledge-text healthKnowledge-w">
       1、脂肪含量高的水果：如水果当中脂肪含量较高，会影响减肥的效果，如牛油果、榴莲、椰子等。
     </view> 
     <view class="healthKnowledge-text healthKnowledge-w">
       2、热量高的水果：包括荔枝、大枣、榴莲、香蕉、石榴等，过多食用高热量的水果会影响减肥的效果。
     </view>
     <view class="healthKnowledge-text healthKnowledge-w">
       3、高糖高的水果：包括葡萄、甘蔗、龙眼、桃子、梅子、芒果、菠萝、枇杷等，糖分较高的水果易引起胰岛素的波动，推动脂肪的合成，阻止脂肪的分解，不易于减肥。
     </view>
     <view class="healthKnowledge-text healthKnowledge-w">
       在减肥的过程当中，建议饮食清淡，避免进食高脂、高糖、油腻的食物，多吃新鲜的蔬菜有利于肠道蠕动，同时适度运动促进脂肪的分解，保持充足的睡眠。。
     </view>
     <view class="healthKnowledge-btn flex justify-between healthKnowledge-w">
       <view class="healthKnowledge-btn-l flex  align-center" @click.stop="clickLike(index)" v-for="(item,index) in operation" :key="index"  :class="{ 'active': activeIndex === index, 'specialactive': specialActiveIndex === index }">
         <view class="icon-con flex justify-center align-center"><text class="icon-size"   :style="{ color: activeIndex === index ? '#5DB175' : '#333' }" :class="item.icon"></text></view>
         <text class="icon-context" :class="{ 'colorActive': activeIndex === index, 'colorActive2': specialActiveIndex === index }">{{ item.text }} <text>({{item.num}})</text> </text>
       </view>
     </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad } from "@dcloudio/uni-app"
  const activeIndex = ref(null)
  const specialActiveIndex = ref(null)
  const imgSrc = ref('https://cdn-static.yekjx.com/food/images/hel_bg16.png')
  
  onLoad((option)=>{
    // imgSrc.value = option.imgSrc
    console.log(option)
  })
  
  const operation = ref([
    {
      id : 0,
      text:'有用',
      icon:'fcon-zan1',
      num:20,
      bg:'#5DB175',
    },
    {
      id : 0,
      text:'没有用',
      icon:'fcon-cai1',
      num:30
    }
  ])
  
  const clickLike = (index:any) => {
    if (index === 0) {
     activeIndex.value = index; 
     specialActiveIndex.value = -1
    } else if (index === 1) {
     activeIndex.value = -1
     specialActiveIndex.value = index; // 
    }
  }
  const allClick = () => {
    console.log('123')
    specialActiveIndex.value = -1
    activeIndex.value = -1
  }
</script>

<style lang="scss">
page{
  background-color: #fff;
}
.active{
  background: #5DB175 !important;
  border: 1px solid #5DB175 !important;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) !important;
  transition: all .5s;
}
.specialactive{
  border: 1px solid #D1D1D1 !important;
  background: #E8E8E8 !important;
}
.colorActive{
  color:#fff !important;
}
.colorActive2{
  color: #333 !important;
}
.healthKnowledge-w{
  width: 652.976rpx;
  margin: 0 auto;
}
.healthKnowledge-img{
  margin-bottom: 20rpx;
  image{
    width: 100%;
    height: 443.646rpx;
  }
}
.healthKnowledge-title{
  color: #333;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "Microsoft YaHei UI";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  padding: 40rpx 0;
  line-height: 150%; /* 30px */
}
.healthKnowledge-text{
  color: #333;
  text-align: justify;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "Microsoft YaHei UI";
  font-size: 32rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
.healthKnowledge-btn{
  margin-top: 132rpx;
  padding-bottom: 60rpx;
  .healthKnowledge-btn-l{
    width: 300rpx;
    height: 110rpx;
    flex-shrink: 0;
    border-radius: 114rpx;
    border: 1px solid #D1D1D1;
    background: #FFF;
    padding-left: 10rpx;
    .icon-size{
      font-size: 50rpx;
      color: #666;
    }
    .icon-con{
      width: 96rpx;
      height: 96rpx;
      flex-shrink: 0;
      border-radius: 114rpx;
      border: 3px solid rgba(209, 209, 209, 0.50);
      background: #FFF;
      margin-right: 20rpx;
    }
    .icon-context{
      color: #333;
      font-feature-settings: 'dlig' on;
      font-family: "Microsoft YaHei UI";
      font-size: 32rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 120%; /* 19.2px */
    }
  }
}
</style>
